div居中的几个方法

老牧童 • 2023-11-24 20:15 • 未分类 • 阅读 156

大家好，欢迎来到IT知识分享网。

一、div居中的几个方法

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

div居中的几个方法

margin 简写属性在一个声明中设置所有外边距属性

弹性布局

1、子div先充满父元素,在margin:auto,

<style>
    .container{
        height: 600px;
        width: 600px;
        border:1px solid black;
        display: flex;
    }
    .box{
        width: 200px;
        height: 100px;
        background-color: blue;
        margin: auto;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

2、弹性布局，通过定义伸缩容器的两个属性，justify-content主轴方向，align-items纵轴方向均为center

<style>
    .container{
        height: 600px;
        width: 600px;
        border:1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box{
        width: 200px;
        height: 100px;
        background-color: blue;
    }

</style>

<div class="container">
    <div class="box"></div>
</div>

定位

先相对于父元素margin平移,再回拉法,

<style>
.container {
    height: 600px;
    width: 600px;
    border: 1px solid black;
    position: relative;
        }
.box {
            width: 300px;
            height: 300px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
         /* transform: translate(-50%, -50%);*/
        }
</style>

<style>

    .container {
            height: 600px;
            width: 600px;
            border: 1px solid black;
            position: relative;
        }
    .box {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: blue;
            margin:auto;
        }
<style>

利用表单单元格td特有属性,vertical-align,使子div垂直居中,再对子div设置水平居中.

    .container{
               width: 100px;
                        height: 100px;
                        border: 1px solid blue;
            
                        /*让标签元素以表格单元格形式呈现，类似于td标签，主要是利用它的特殊属性：
                        元素垂直居中对齐，但其会被float、position:absolute、
                        所以尽量不要与其同用，设置了display：table-cell的元素对宽度高度敏感，
                        对margin值无反应，所以页面上出现在了左边，我就不想再在外面加调了哈，
                        但会响应padding属性，基本和td标签无异*/
                        display: table-cell;/* 使子div垂直居中 */
                        vertical-align:middle;/* 再对子div设置水平居中 */
        }
        .box{
                 width: 50px;
                        height: 50px;
                        background: blue;
                        margin:0 auto;
        }
    </style>

二、参考文献

1、div垂直水平居中的四种方法总结

div居中的几个方法

2、css display:flex 属性

https://www.jianshu.com/p/d9373a86b748

3、position

https://blog.csdn.net/cx17521000200/article/details/81978651

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30403.html

div居中的几个方法

1、div垂直水平居中的四种方法总结

相关推荐

发表回复