居中有很多方式,比如 flex,girl网格布局,text-aling,magin:auto等等比较常用的…
flex 布局 上下左右居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
.box{
display: flex;
width: 100%;
height: 500px;
border: 1px solid #333;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cont{
width: 30%;
height: 100px;
border: 1px solid red;
flex-grow:1;
}
</style>
</head>
<body>
<div class="box">
<div class="cont">aaaaa</div>
<div class="cont">aaaaa</div>
</div>
</body>
</html>
子元素水平垂直居中,另一种(grid网格布局)实现方式!
//水平垂直居中,除了定位,margin/padding,表格,flex的方式,还可以用“grid网格布局”:
.parent {
display: grid;
place-items: center;
}
行内元素的水平居中
//要实现行内元素(<span>、<a>等)的水平居中,只需把行内元素包裹在块级父层元素(<div>、<li>、<p>等)中,并且在父层元素CSS设置
.content{
text-align:center;
}
块状元素的水平居中
//要实现块状元素(display:block)的水平居中,我们只需要将它的左右外边距margin-left和margin-right设置为auto,即可实现块状元素的居中,要水平居中的块状元素CSS设置
.center{
margin:0 auto;
}