css垂直水平居中三种方法

秒速五厘米 2021-11-09 00:22 319阅读 0赞

图例样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]  
div：

<div class="par">
    	<span id="son">我是块级元素</span>
    </div>

方法一：未知宽高 transform

.par{ 
    	width: 100%;
    	height: 300px;
    	background-color: skyblue;
    	position: relative;
    }
    #son{ 
    	position: absolute;
    	background: gray;
    	top: 50%;
    	left: 50%;
    	transform: translateX(-50%) translateY(-50%);
    }

方法二： 未知宽高 flex布局

.par{ 
    	width: 100%;
    	height: 300px;
    	background-color: skyblue;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    #son{ 
    	background: gray;
    }

方法三：定死宽高 margin

.par{ 
    	width: 100%;
    	height: 300px;
    	background-color: skyblue;
    	position: relative;
    }
    #son{ 
    	width: 100px;
    	height: 100px;
    	background: gray;
    	position: absolute;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    	margin: auto;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]: /images/20211108/10e6c587c0fd4ddd9cc2229784da1c5f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS水平居中+垂直居中+水平/垂直居中的方法总结

转载一位大佬的 [CSS水平居中+垂直居中+水平/垂直居中的方法总结\_一只前端小菜鸟~的博客-CSDN博客\_垂直居中的方法][CSS_-CSDN] 分享一篇我的博客

男娘i/ 2023年10月09日 15:03/ 0 赞/ 33 阅读

相关 css水平垂直居中

css水平垂直居中方法总结，简单明了水平居中对于行内元素(inline)：text-align: center; 对于块级元素(block)：设置宽

r囧r小猫/ 2023年06月10日 10:29/ 0 赞/ 12 阅读

相关 CSS垂直水平居中

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

快来打我*/ 2023年01月14日 12:58/ 0 赞/ 197 阅读

相关 [CSS]元素水平垂直居中方法

1）父元素设置display:flex; justify-content:center; align-items:center; 2）元素position:absolute

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 01:58/ 0 赞/ 178 阅读

相关 [CSS]垂直水平居中

垂直水平居中两种实现方式： 1. .box{ width:200px; height: 200px; backgrou

约定不等于承诺〃/ 2022年11月26日 04:58/ 0 赞/ 317 阅读

相关 CSS水平垂直居中

在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

不念不忘少年蓝@/ 2022年11月12日 08:18/ 0 赞/ 338 阅读

相关（css）盒子水平、垂直居中方法

利用定位和margin： 1、给要居中盒子的父盒子设置相对定位 2、给要居中的盒子设置固定定位 3、水平left、垂直top都设置为50% 4、利用margin，m

桃扇骨/ 2022年10月31日 13:35/ 0 赞/ 220 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 462 阅读

相关 css实现水平垂直居中方法

html: <div class="box box1"> <span>垂直居中</span> </div> 法一： .bo

末蓝、/ 2022年05月13日 11:26/ 0 赞/ 271 阅读

相关 css垂直水平居中三种方法

图例样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

秒速五厘米/ 2021年11月09日 00:22/ 0 赞/ 320 阅读