首页 > 其他分享> > css 水平垂直居中显示（定高不定高定宽不定宽）

css 水平垂直居中显示（定高不定高定宽不定宽）

2019-03-01 13:53:56 作者：互联网

position 元素已知宽度

 <div class="father">
    <div class="child">
       hello word!!!
    </div>
  </div>
 .father{
     background-color: red;
     width: 700px;
     height: 700px;
     position: relative;
 }
 .child{
     background-color: rosybrown;
     width: 300px;
     height: 300px;
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -150px 0 0 -150px;//已知宽度的一半  高度的一半
 }

position 元素未知宽度

 <div class="father">
     <div class="child">
           hello word!!!
     </div>
</div>
.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%)
}

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>

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>

标签：居中,color,height,高定,width,定高,background,position,不定
来源： https://www.cnblogs.com/xiaoxiao2017/p/10454562.html