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

最新推荐文章于 2022-02-27 12:52:49 发布

weixin_30908649

最新推荐文章于 2022-02-27 12:52:49 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/xiaoxiao2017/p/10454562.html

版权

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>

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>

转载于:https://www.cnblogs.com/xiaoxiao2017/p/10454562.html

weixin_30908649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 水平垂直居中显示（定高不定高定宽不定宽）

position 元素已知宽度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> .father{ background-...
复制链接

扫一扫