CSS如何设置div水平居中

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

注意：inline-block存在浏览器兼容性问题，另行处理因设置inline-block带来的副作用。

补充：使用定位

方式：父级元素设置属性：position: relative;

子一级元素设置属性：position: absolute;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div class="div-parent">

        <style>

            .div-parent {

              width: 400px;

              height: 200px;

              background-color: #aaa;

              position: relative;

            }

            .div-child {

                width: 80px;

                height: 50px;

                background-color: #007FFF;

                position:absolute;

                left: 40%;

               }

        </style>

            <div class="div-child"></div>

        </div>

效果如图：

注意：适用于父级元素宽度已知的情况，居中定位自己设置比较麻烦。

【推荐学习：css视频教程】

以上就是CSS如何设置div水平居中的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css如何改字体

css如何设置边框阴影

jq怎么写css样式

:not()是什么？:not()的简单使用

html和css是什么语言？

什么是css reset

img元素可以用css吗

html和css是语言吗

css背景怎么设置

如何实现图片抖动效果

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...