盒子居中的幾種方式
阿新 • • 發佈：2018-12-30
第一種：普通流盒子居中；
通過設定上邊框為透明色，進行高度及計算，後居中；
第二種：利用相對定位和絕對定位進行居中；*{ margin: 0; padding: 0; } .big{ width: 400px; height: 400px; background: blue; border-top: 1px solid transparent; } .big>div{ width: 200px; height: 200px; background: red; margin: 25% auto; } </style> </head> <body> <div class="big"> <div>列1</div> </div> </body>
第三種方式：利用button做外容器，裡邊的塊元素會自動垂直居中，只需要控制一下水平居中就可以達到效果；.big{ width: 400px; height: 400px; background: blue; position: relative; } .big>div{ width: 200px; height: 200px; background: red; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="big"> <div>列1</div> </div> </body>
第四種利用彈性盒子居中：CSS3中引入的新佈局方式，比較好用。缺點：IE9以及IE9一下不相容。<style> *{ margin: 0; padding: 0; } .big{ width: 400px; height: 400px; background: blue; } .big>div{ width: 200px; height: 200px; background: red; margin: 0 auto; } </style> </head> <body> <button class="big"> <div>列1</div> </button> </body>
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
display: flex;
}
.big>div{
width: 200px;
height: 200px;
background: red;
margin: auto;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>第五種：利用transform居中；這種方法靈活運用CSS中transform屬性，較為新奇。
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
}
.big>div{
width: 200px;
height: 200px;
background: red;
transform: translate(50%,50%);
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>第六種：利用table-cell居中方式
<style>
*{
margin: 0;
padding: 0;
}
.big{
width: 400px;
height: 400px;
background: blue;
display: table-cell;
vertical-align: middle;
}
.big>div{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
</div>