当前位置：首页 > news >正文

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

news 2025/8/6 5:52:07

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%);