首页 > > 网页制作 > css >

CSS 水平垂直居中

2018-08-21 05:37:30来源：博客园阅读 ()

方法一：

容器确定宽高：知识点：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;        /* 方便看效果 */
 }