Html CSS 布局，位置处理 居中 对齐

Html CSS 布局，位置处理

1、居中布局

1、div 让内部div居中对齐

• html

<div class="container">
    <div class="item">I am centered!</div>
</div>

• style

      .container {
            border: 2px solid rgb(75, 70, 74);
            border-radius: .5em;
            height: 200px;
            display: flex;
            align-items: center;   /*调整y方向的位置 start 顶端对齐，center居中，end底端对齐*/
            justify-content: center;  /*调整x方向位置  left 左对齐  center居中   right右对齐*/
        }

        .item {
            border: 2px solid rgb(95, 97, 110);
            border-radius: .5em;
            padding: 20px;
            width: 10em;
            text-align: center;
        }

div全局居中对齐

• html

  <div class="box"></div>

• style

.box{
            width:100px;
            height:100px;
            background-color: cyan;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

使用盒子模式让内部div居中

display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;

使用绝对定位让div居中

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);