css 水平垂直居中显示（定高不定高定宽不定宽）
position 元素已知宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.father{
background-color: #FF8C00;
width: 600px;
height:600px;
position: relative;
}
.child{
background-color: rosybrown;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
hello word!!!
</div>
</div>
</body>
</html>
position 元素未知宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.father{
background-color: #FF8C00;
height: 300px;
position: relative;
}
.child{
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
</style>
</head>
<body>
<div class="father">
<div class="child">
hello word!!!
</div>
</div>
</body>
</html>
position 可以不知道宽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .father{ background-color: #FF8C00; height: 500px; width: 500px; position: relative; } .child{ background-color: #F00; width: 200px; height: 200px; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div class="father"> <div class="child"> hello word!!! </div> </div> </body> </html>
flex可以不知道宽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .father{ background-color: #FF8C00; height: 500px; width: 500px; display: flex;/*flex布局*/ justify-content: center;/*使子项目水平居中*/ align-items: center;/*使子项目垂直居中*/ } .child{ background-color: #F00; width: 200px; height: 200px; } </style> </head> <body> <div class="father"> <div class="child"> hello word!!! </div> </div> </body> </html>
grid 布局 justify-content: center; align-content: center（align-items: center;）;
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> .container { display: grid; /* grid-template-columns属性定义每一列的列宽， grid-template-rows属性定义每一行的行高。 */ grid-template-columns: repeat(4, 60px); grid-template-rows: repeat(2 , 60px); /* grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式， grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）我设置的是10 行与行之间 列与列之间 都是10*/ grid-gap: 10px; /* item在这个单元格中的位置justify-items属性设置单元格内容的水平位置（左中右）， align-items属性设置单元格内容的垂直位置（上中下） */ align-items: center; justify-items: center; /* justify-content属性是整个内容区域在容器里面的水平位置（左中右）， align-content属性是整个内容区域的垂直位置（上中下）。 */ justify-content: center; align-content: center; width: 100%; height: 500px; background: rebeccapurple; } .item { width: 30px; height: 30px; border: 1px solid red; display: grid; justify-content: center; align-content: center;同align-items: center; }
table-cell布局 需要三个标签 相对麻烦 因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .father{ background-color: #FF8C00; height: 500px; width: 500px; display: table; } .child{ background-color: #F00; width: 200px; height: 200px; display: table-cell; vertical-align: middle;/*使子元素垂直居中*/ text-align: center;/*使子元素水平居中*/ } .childInner{ background-color: #000; display: inline-block;/*使子元素呈现块状*/ width: 100px; height: 100px; } </style> </head> <body> <div class="father"> <div class="child"> <div class="childInner"> hello word!!!</div> </div> </div> </body> </html>
