CSS_水平垂直居中总结

最新推荐文章于 2022-09-04 15:57:52 发布

-王二毛-

最新推荐文章于 2022-09-04 15:57:52 发布

阅读量131

点赞数

分类专栏： # css 文章标签： eclipse java tomcat

本文链接：https://blog.csdn.net/weixin_45084986/article/details/123838273

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

https://segmentfault.com/a/1190000013966650

一、水平居中

1.1、行内元素水平居中

方式一：父元素设置 text-align: center
利用text-align: center可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。

<style type="text/css">
    div {
        height:50px;
        border: 2px dashed #f69c55;
    }
    .father {
        text-align: center;
    }
</style>

<body>
    <div class="father">
        <span>王二毛</span>
    </div>
</body>

在这里插入图片描述

1.2 、块级元素水平居中

1.2.1、定宽高

子元素使用margin: 0 auto;

<style type="text/css">
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        
    }

    #son {
        width: 100px;
        height: 100px;
        background-color: rgb(29, 231, 29);
        margin: 0 auto;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

在这里插入图片描述

1.2.2、不定宽高

父元素：
display: flex;
justify-content: center;

<style type="text/css">
    #father {
	     width: 500px;
	     height: 300px;
	     display: flex;
	     justify-content: center;
	     background-color: skyblue;
    }

    #son {
    	/*定不定都可以*/
        /*width: 100px;
        height: 100px;*/
        background-color: rgb(29, 231, 29);
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

在这里插入图片描述

1.2.3、多块级元素水平居中

如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

<style type="text/css">
    .father {
        width: 500px;
        height: 300px;
        text-align: center;/*1*/
        background-color: skyblue;
    }

    .son {
        width: 100px;
        height: 100px;
        margin: 0 8px;
        display: inline-block;/*2*/
        background-color: rgb(29, 231, 29);
    }
</style>

<div class="father">
    <div class="son">我是块级元素</div>
    <div class="son">我是块级元素</div>
    <div class="son">我是块级元素</div>
</div>

在这里插入图片描述

二、垂直居中

2.1、行内元素垂直居中

2.1.1、单行行内元素垂直居中

设置行内元素的(line-height)和父级元素height的相等，从而使行内元素垂直居中。

<style type="text/css">
	  .father {
          width: 500px;
          height: 120px;
          background-color: skyblue;
      }
	
      .son {
          line-height: 120px;
      }
</style>

<div class="father">
   <span class="son">我是行内元素</span>
</div>

在这里插入图片描述

2.1.2、多行行内元素垂直居中

<style type="text/css">
    .father {
        width: 400px;
        height: 300px;
        display: table;
        background-color: skyblue;
    }

    .son {
        display: table-cell;
        vertical-align: middle;
    }
</style>

<div class="father">
    <span class="son">
        爱是什么？努力是人生的一种精神状态，是对生命的一种赤子之情。</span>
</div>

在这里插入图片描述

2.1.3、使用flex

<style type="text/css">
    .father {
        width: 400px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: skyblue;
    }
</style>

<div class="father">
    <span class="son">
    爱是什么？努力是人生的一种精神状态，是对生命的一种赤子之情。
    </span>
</div>

在这里插入图片描述

2.2、块级元素垂直居中

2.2.1、固定高度的块级元素

<style type="text/css">
    .father {
        width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    }

    .son {
        height: 100px;
        position: absolute;
        top: 50%;
        margin-top: -50px;/*上移二分之一高度*/
        background-color: rgb(82, 241, 43);
    }
</style>

<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

在这里插入图片描述

2.2.2、不固定高度的块级元素

<style type="text/css">
   .father {
     	width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    }

    .son {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgb(36, 235, 46);
    }
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

在这里插入图片描述

三、水平垂直居中

3.1、固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中

<style type="text/css">
    .father {
        width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    }

    .son {
        width: 200px;
        height: 80px;
        padding: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -110px;
        background-color: rgb(36, 235, 46);
    }
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

在这里插入图片描述

3.2、固定或未知宽高元素水平垂直居中

3.2.1、position


 <style type="text/css">
 	.father {
    	width: 400px;
        height: 200px;
        position: relative;
        background-color: skyblue;
    }

    .son {
        /* width: 200px;
        height: 80px; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgb(36, 235, 46);
    }
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

在这里插入图片描述

3.2.2、利用flex布局(要考虑兼容性)

<style type="text/css">
    .father {
        width: 400px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: skyblue;
    }

    .son {
        width: 200px;
        height: 80px;
        background-color: rgb(36, 235, 46);
    }
</style>
<div class="father">
    <div class="son">
        我是块级元素
    </div>
</div>

在这里插入图片描述

-王二毛-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_水平垂直居中总结

https://segmentfault.com/a/1190000013966650一、水平居中1.1、行内元素水平居中方式一：父元素设置 text-align: center利用text-align: center可以实现在块级元素内部的行内元素水平居中。此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。<style type="text/css"> div {
复制链接

扫一扫