div+css垂直居中和水平居中

最新推荐文章于 2022-07-30 12:07:56 发布

转载最新推荐文章于 2022-07-30 12:07:56 发布 · 8.2k 阅读

文章标签：

#div #css #float #scroll #border

css技术专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用CSS实现各种元素的居中对齐方法，包括单行文本的垂直居中、层的水平居中、层中文字的水平居中、div层的垂直居中及同时水平垂直居中等，并展示了如何实现div内的垂直滚动条。

1、单行垂直居中

文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

2、层水平居中

设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。

#parentdiv

{

width: 500px;

}

#childdiv {

width: 200px;

margin:0 auto;

}

3、层中的文字水平居中

在childdiv的css加上text-align:center;

#parentdiv

{

width: 500px;

}

#childdiv {

width: 200px;

margin:0 auto;

text-align:center;

}

4、div层垂直居中

<div

style=" background:red;position:static;position:absolute/9; top: 50%;">

<div

style=" background:blue;position: relative; top: -50%;">

法师的法师飞洒发送飞洒发送放大法大法师的

</div>

5、div层垂直水平居中，英文超长换行

<div

style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">

<div

style="position:static;position:absolute/9; top: 50%;">

<div

style="position: relative; top: -50%; text-align: center;">

aaaaaabbbbbccccccdddfasdfwegerjjlklolofwefemosmhsjgigafinmaofmaofjoajfomdasofmnfenfien

</div>

6、div垂直滚动

<div

style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">

法是对方是大法师的法

</div>

7、垂直居中和使用text-align水平居中

<div

style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">

<div

style="position:static;position:absolute/9;top: 50%;">

<div

style="position: relative; top: -50%; text-align:center;">

aaaaaabbbbbccccccdddfasdfwegerjjlklolofwefemosmhsjgigafinmaofmaofjoajfomdasofmnfenfien

</div>

8、垂直居中和使用margin水平居中

<div

style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">

<div

style="position:static;position:absolute/9; top: 50%;">

<div

style="position: relative; top: -50%; ">

aaaaaabbbbbccccccdddfasdfwegerjjlklolofwefemosmhsjgigafinmaofmaofjoajfomdasofmnfenfien

</div>

div+css垂直居中和水平居中

2 条评论