网站建设

DIV居中的经典方法

daimafengzi · 2月12日 · 2022年本文共445个字 · 预计阅读2分钟4次已读
  1. 实现DIV水平居中
    设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。
div{
width: 100px;
height: 100px;
margin: 0 auto;
}

DIV居中的经典方法
缺点:需要设置div的宽度

2.实现DIV水平、垂直居中
要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。

div{
   width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

DIV居中的经典方法

  1. 文本在DIV中水平、垂直居中(text-align + line-height)
    1)text-align 属性规定(块级)元素内文本的水平对齐方式。
    DIV居中的经典方法
    2)line-height = height,行高等于元素高度,用来实现垂直居中。
    DIV居中的经典方法
0 条回应