css样式水平居中和垂直居中的方法_简单_前端开发者

水平居中(包含块中居中)

1. 定宽,左右margin为auto。(常规流块盒、弹性项目[不用定宽])

例子:在box1盒子上设置宽,再设置margin:auto;

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        margin: auto;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        margin: auto;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

<style>
.box1
{
width
: 200px;
height
: 200px;
background-color
: black;
margin
: auto;}</style><body><div class=”box-all”><div class=”box1″></div></div></body>

得到的效果:

 

 

 

2. 弹性盒设置justify-content: center,让弹性项目在主轴上居中。(普遍适应)

例子:在其父元素上设置弹性盒子,和对齐方式;

<style>
    .box-all {
        display: flex;
        justify-content: center;
    }
    
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>
<style>
    .box-all {
        display: flex;
        justify-content: center;
    }
    
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

<style>
.box-all
{
display
: flex;
justify-content
: center;}

.box1 {
width
: 200px;
height
: 200px;
background-color
: black;}</style><body><div class=”box-all”><div class=”box1″></div></div></body>

得到的效果:

3. 父元素设置text-align: center,让其内部的行盒、块盒居中(文本)。

例子:在盒子上设置text-align:center;文本自动居中;

<style>
    p {
        text-align: center;
    }
</style>

<body>
    <div class="box-all">
        <p>这是一段文本。</p>
    </div>
</body>
<style>
    p {
        text-align: center;
    }
</style>

<body>
    <div class="box-all">
        <p>这是一段文本。</p>
    </div>
</body>

<style>
p
{
text-align
: center;}</style><body><div class=”box-all”><p></p></div></body>

得到的效果:

 

 

 

4. 相对定位元素,margin-left:50%; transform:translateX( -50%)。[margin,padding相对于包含块宽度的百分比] 【终极方案】

例子:对盒子设置相对定位属性,在用上面方式进行定位;

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        position: relative;
        margin-left: 50%;
        transform: translateX(-50%);
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: black;
        position: relative;
        margin-left: 50%;
        transform: translateX(-50%);
    }
</style>

<body>
    <div class="box-all">
        <div class="box1"></div>
    </div>
</body>

<style>
.box1
{
width
: 200px;
height
: 200px;
background-color
: black;
position
: relative;
margin-left
: 50%;
transform
: translateX(-50%);}</style><body><div class=”box-all”><div class=”box1″></div></div></body>

得到的效果:

垂直居中(方法与上面类似,我就不演示了)

1. 单行文本垂直居中,设置父元素的line-height为包含块高度。

2. 弹性盒设置align-items:center,让弹性项目在侧轴上居中。

3. 相对定位元素,top:50%;transform:translateY(-50%)。【终极方案】

 

» 本文来自:前端开发者 » 《css样式水平居中和垂直居中的方法_简单_前端开发者》
» 本文链接地址:https://www.rokub.com/73296.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!