CSS水平垂直居中

作者: INGME | 来源:发表于2017-11-29 20:35 被阅读0次

CSS图片居中(水平居中和垂直居中)
CSS水平垂直居中总结
前端秘籍，CSS垂直居中必学八式，一招一式尽显功力
CSS display: table-cell 用于水平垂直居中
垂直居中，水平居中
css 居中
CSS解决盒模型居中的问题
2020-03-05 CSS水平垂直居中学
页面布局居中问题
CSS - 垂直水平居中方法

1.利用定位（Position）

<!doctype html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .parent{
            width:500px;
            height:500px;
            background: red;
            position: relative;
        }
        .child{
            width:50px;
            height:50px;
            background: yellow;
            position:absolute;
            left:50%;
            top:50%;
            margin-top:-25px;
            margin-left:-25px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html

2.定位(position)与位移(translate)

//html
  <div class="parent">
      <div class="child">
      </div>
  </div>
//css
   .parent{
            width:300px;
            height:300px;
            background-color: red;
            position: relative;
        }
        .child{
            width:100px;
            height:100px;
            background-color: pink;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }

3.定位

 //HTML
     <div class="one">
         <div class="two">
         </div>
     </div>
 //css
      .one{
            width:400px;
            height:400px;
            background-color: red;
            position: relative;
           }
        .two{
            width:100px;
            height:100px;
            background-color: pink;
            position: absolute;
            margin:auto;
            left:0;
            top:0;
            bottom:0;
            right:0;

        }

.