CSS 水平垂直居中
程序员文章站
2022-06-27 14:35:00
方法一： 容器确定宽高：知识点：transform只能设置在display为block的元素上。 方法一效果图: 方法二： ......
方法一：
容器确定宽高：知识点：transform只能设置在display为block的元素上。
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
#container{
width: 500px; /* 确定！*/
height: 300px;
background-color: pink;
}
#child{
width: 100px; /* 如果没有宽度，div充满容器，怎么水平居中 */
position: relative; /* 相对父容器进行定位，规定top left值 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 如果不设置这个，其实是子div的左上原点是水平垂直居中，这个translate百分比是自身的百分比*/
text-align: center; /* 里面的文字居中 */
}
</style>
</head>
<body>
<div id="container">
<div id="child">哈哈哈哈</div>
</div>
</body>
方法一效果图:
方法二：
利用 flex 布局 实际使用时应考虑兼容性，flex不兼容ie9
父容器高度没有设置，那么其高度就是子容器撑开的，也就没有垂直居中这一说，只需要水平居中即可。
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}