CSS面试题-水平和垂直居中

最新推荐文章于 2024-04-15 04:55:32 发布

爱敲代码的胖大泳

最新推荐文章于 2024-04-15 04:55:32 发布

阅读量244

点赞数

分类专栏： css 文章标签： css 定位 html css3 html5

本文链接：https://blog.csdn.net/weixin_47047317/article/details/107023486

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

单行文本——水平垂直居中（常用）

水平：text-align:center
垂直：元素的高度hegight 等于元素行高 line-height

	 text-align:center;
	 height: 30px;
	 line-height: 30px;

多行文本/块级元素——垂直居中

display:table实现（常用）

display: table使块状元素成为一个块级表格;

display: table-cell;子元素设置成表格单元格;

text-align:center;vertical-align: middle;使表格内容居中显示，即可实现水平垂直居中的效果;

	<body>
		<div class="father">
	        <div class="son">我爱敲代码我爱敲代码我爱敲代码</div>
		    </div>
	</body>

        .father {
            width: 100px;
            height: 300px;
            border: 1px solid black;
            display: table;
        }
        
        .son {
            display: table-cell;
            vertical-align: middle;
        }

定位：absolute和tansform实现（常用）

position:absolute; 首先给文本/块元素绝对定位；

设置元素相对于父元素的 left:50%;top:50%;这时元素会在中央偏右下的位置

transform:translate(-50%,-50%)，元素向左（上）平移它自己宽度（高度）的50%，达到居中效果

	<body>
		<div class="father">
	        <div class="son"></div>
		    </div>
	</body>

       .father {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(-50%, -50%);
        }

定位：relative和tansform实现(常用)

       .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        
        .son {
            position: relative;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(-50%, -50%);
        }