• 技术文章 >web前端 >css教程

    CSS如何设置div水平居中

    醉折花枝作酒筹醉折花枝作酒筹2021-04-09 11:44:25原创165

    CSS设置div水平居中的方法:1、给div元素设置“margin: 0 auto”样式;2、在父级div元素里设置“text-align: center”样式,在子一级div元素里设置“display: inline-block”样式。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    1、外边距自适应

    方式:元素绑定属性:margin: 0 auto;

      <div class="div-parent">
                <style>
                    .div-parent {
                      width: 400px;
                      height: 200px;
                      background-color: #aaa;
                    }
                    .div-child {
                        width: 100px;
                        height: 50px;
                        background-color: #007FFF;
                        margin: 0 auto;
                    }
                </style>   
                <div class="div-child"></div>
            </div>

    效果:

    注意:常用,适用于已知父级元素宽度的情况

    2、行内块元素

    方式:父级元素设置属性:text-align: center;

    子一级元素设置属性:display: inline-block;

    <div class="div-parent">
            <style>
                .div-parent {
                  width: 400px;
                  height: 200px;
                  background-color: #aaa;
                  text-align: center;
                }
                .div-child {
                    width: 100px;
                    height: 50px;
                    background-color: #007FFF;
                    display: inline-block;
                }
            </style>
                <div class="div-child"></div>
            </div>

    效果如图:

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

    补充:使用定位

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

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

    <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水平居中的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css div
    上一篇:css如何设置圆角 下一篇:CSS如何设置行间距和字间距
    第15期线上培训班

    相关文章推荐

    • css怎么设置微软雅黑• css怎么隐藏li• css如何实现显示和隐藏• css怎么排除第一个子元素• css怎么设置不显示文字

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网