DIV居中的经典方法

DIV居中的经典方法参考:https://www.cnblogs.com/rubykakas/articles/7992662.html1.实现DIV水平居中设置DIV的宽高,使用margin设置边距0auto,CSS自动算出左右边距,使得DIV居中。div{ width:100px; height:100px; margin:0auto;}缺点:需要设置div的宽度2.实现DIV水平、垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对

参考:https://www.cnblogs.com/rubykakas/articles/7992662.html

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居中的经典方法

缺点:需要设置position属性,网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

3. 文本在DIV中水平、垂直居中(text-align + line-height)

text-align 属性规定(块级)元素内文本的水平对齐方式。

DIV居中的经典方法

line-height = height,行高等于元素高度,用来实现垂直居中。

div{
    width:200px;height:200px;  /*设置div的大小*/
    border:1px solid green;    /*边框*/
    text-align: center;        /*文字水平居中对齐*/
    line-height: 200px;        /*设置文字行距等于div的高度*/
    overflow:hidden;
}

DIV居中的经典方法

今天的文章DIV居中的经典方法分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/28348.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注