【HTML+CSS】史上最全居中整理

最新推荐文章于 2024-06-18 19:41:46 发布

置顶半个头像的女同学

最新推荐文章于 2024-06-18 19:41:46 发布

阅读量381

点赞数

分类专栏： HTML+CSS 文章标签： html css 面试

本文链接：https://blog.csdn.net/jycml/article/details/106711807

版权

HTML+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

“同学你好，请论述你知道的居中一个元素的方法”，这句话是不是很耳熟，居中问题在前端面试中出现的频率很高，很多人都知道几个居中的方法，但是很少人能说出所有的居中方法。前方高能，史上最强居中整理来袭。

首先，如果遇到面试官问：“请论述你知道的居中一个元素的方法”，你先反问面试官：“亲爱的面试官，是水平居中还是垂直居中？是块元素还是行内元素？是否知道宽和高？是否考虑兼容性？”问完之后睁大眼睛凝视面试官，吓他一跳，如果面试官说：“那你把各种情况都说说”，行，那咱们今天就来说说。

注意篇幅较长，需要花点时间。

一、水平居中
1. 块元素
子元素设置：margin：0 auto

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
        #children{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }
</style>

<div id="parent">
        <div id="children">
        	水平居中，块元素
        </div>
</div>

在这里插入图片描述

2. 行内元素、行内块元素
父元素设置：text-align：center

    <style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
        }
        span{
            background-color: pink;
        }
    </style>
    
	<div id="parent">
	        <span>行内元素span</span>
	</div>

在这里插入图片描述

二、垂直居中
1. 行内元素：
父元素：line-height：XX px（line-height的高度与height高度一致）

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            line-height: 200px;
        }
        span{
            background-color: pink;
        }
</style>

<div id="parent">
        <span>行内元素span</span>
</div>

在这里插入图片描述
2. 行内块元素
父元素：line-height：xxpx（与height高度相同）
子元素：display：inline-block， vertical-align：middle

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            line-height: 200px;
        }
        #children{
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
            vertical-align: middle;
        }
</style>

<div id="parent">
        <div id="children">
            
        </div>
</div>

在这里插入图片描述
三、水平垂直居中
1.已知宽高，需要用到宽高，通过absolute+margin（负数）的方法

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            position: relative;
        }
        #children{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
</style>
<div id="parent">
        <div id="children">
            需要设置宽高，也需要用到宽高
        </div>
</div>

在这里插入图片描述
2.已知宽高，用calc方法（CSS3规则，IE8及以下不支持）

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            position: relative;
        }
        #children{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top:calc(50% - 50px);
            left:calc(50% - 50px)
        }
</style>
<div id="parent">
        <div id="children">
			需要设置宽高，也需要用到宽高
        </div>
</div>

在这里插入图片描述

2.已知宽高，但是不需要用到宽高
在这里插入图片描述

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            position: relative;
        }
        #children{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }
</style>
<div id="parent">
        <div id="children">

        </div>
</div>

在这里插入图片描述

3.不需要设定宽高，用transform，（CSS3规则，IE8及以下不支持）
在这里插入图片描述

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            position: relative;
        }
        #children{
            background-color: pink;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
</style>

<div id="parent">
        <div id="children">
            未设定宽高，水平垂直居中
        </div>
</div>

在这里插入图片描述
4.使用table布局：inline-block+table>tr>td

<style>
        td{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
        }
        #children{
            background-color: pink;
            display: inline-block;
        }
</style>

<div id="parent">
        <table>
            <tr>
                <td>
                    <div id="children">
                        inline-block+table布局
                    </div>
                </td>
            </tr>
        </table>
</div>

在这里插入图片描述
5.inline-block+table-cell

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            display:table-cell;
            text-align: center;
            vertical-align: middle;
        }
        #children{
            background-color: pink;
            display: inline-block;
        }
</style>
<div id="parent">
        <div id="children">
            inline-block+table-cell设置
        </div>
</div>

在这里插入图片描述
6.inline-block+writing-mode 两层嵌套（工作中很少用）

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            writing-mode: vertical-lr;
            text-align: center;
        }
        #children{
            width: 100%;
            background-color: pink;
            display: inline-block;
            writing-mode: horizontal-tb;
            text-align: center;
        }
        #grandson{
            display: inline-block;
            vertical-align: middle;
            text-align: center;
        }
</style>

<div id="parent">
        <div id="children">
            <div id="grandson">
                两层嵌套,先文字垂直居中，再文字水平居中
            </div>
        </div>
</div>

在这里插入图片描述

7.inline-block+父子字体（工作中很少用）
在这里插入图片描述

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
            //高度为height*0.64
            font-size: 128px;
        }
        #children{
            background-color: pink;
            display: inline-block;
            vertical-align: middle;
            font-size: 12px;
        }
</style>
<div id="parent">
        <div id="children">
            通过字体风骚设置居中
        </div>
</div>

在这里插入图片描述
8.神器：display：flex（CSS3规则，IE9及以下不支持）

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #children{
            background-color: pink;
        }
</style>
<div id="parent">
        <div id="children">
            布局神器display：flex
        </div>
</div>

在这里插入图片描述
9.Grid布局（CSS3规则，IE9及以下，Chrome56及以下，Firefox51及以下，安卓5及以下，IOS10.2及以下，不支持）

<style>
        #parent{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            display: grid;
        }
        #children{
            background-color: pink;
            align-self: center;
            justify-self: center;
        }
</style>

<div id="parent">
        <div id="children">
            Grid布局
        </div>
</div>