水平居中
text-align
在父元素上設(shè)置text-align: center 使文字/圖片水平居中。
.container {
text-align: center;
}
margin
.container {
width: 80%;
margin:0 auto;
}
水平垂直居中
paddin + text-align:center;(子元素不是塊級元素的情況下)
//HTML
<div class="ct">
<p>這里是饑人谷</p>
<p>這里是饑人谷</p>
</div>
//CSS
.ct{
padding: 40px 0;
text-align: center;
background:#ddd;
}
效果圖：
padding+text-align:center
父元素不寫高的情況下padding + margin(子元素是塊級元素情況)
<div class="box">
<div class="xx"></div>
</div>
.xx{
width:100px;
height:100px;
background:#000;
margin:0 auto;
}
.box{
width:200px;
background:#ccc;
padding:20px 0;
}
position+margn:auto實現(xiàn)居中：
//HTML
<body>
<div class="box">
<div class="xx"></div>
</div>
</body>
//CSS
.box{
width:200px;
height:200px;
background:#ccc;
position:relative;
}
.xx{
width:100px;
height:100px;
background:#000;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
position:absolute
position + transform:translate實現(xiàn)居中：
//HTML
<body>
<div class="box">
<div class="xx"></div>
</div>
</body>
//CSS
.xx{
width:100px;
height:100px;
background:#000;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.box{
width:200px;
height:200px;
background:#ccc;
position:relative;
}
效果圖：
transform:translate
table-cell實現(xiàn)居中
//HTML
<body>
<div class="box">
<div class="xx"></div>
</div>
</body>
//CSS
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
}
.xx{
width: 100px;
border:1px solid;
margin:0 atuo;
}
效果圖
table-cell
display: flex
//HTML
<body>
<div class="box">
[圖片上傳失敗...(image-cfdd76-1524486725573)]
</div>
</body>
//CSS
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: flex;/* 彈性布局 */
justify-content:center;/* 水平居中 */
align-items:center;/* 垂直居中 */
}
.box img{
width: 100px;
border:1px solid;
}
效果圖
display:flex
