css实现盒子水平居中

古城微笑少年丶 2022-02-12 21:09 270阅读 0赞

展示4种，有两个元素，父盒子和子盒子。  
div:

<div class="m1">
    			<div class="m2"></div>
    </div>

*  1、使用margin: 0 auto;

.m1{
    				width: 300px;
    				height: 300px;
    				border: 1px solid red;
    			}
    			.m2{
    				width: 200px;
    				height: 200px;
    				border: 1px solid blue;
    				margin: 0 auto;
    	}

*  2、使用margin左右边距计算用margin-left：宽度固定；

.m1{
    				width: 300px;
    				height: 300px;
    				border: 1px solid red;
    				
    			}
    			.m2{
    				width: 200px;
    				height: 200px;
    				border: 1px solid blue;
    				margin-left: 49px;
    	}

*  3、先让盒子左右边缘和父盒子垂直的中心边缘重叠，再往回走自己宽度的一半。

.m1{
    				width: 300px;
    				height: 300px;
    				border: 1px solid red;
    				 position: relative;
    			}
    			.m2{
    				width: 200px;
    				height: 200px;
    				border: 1px solid blue;
    				position: absolute;
    				margin-left: 150px;
    				left: -101px;
    }

*  4、把子盒子转换成行内块，然后父盒子使用text-align：center；宽度不确定块状元素水平居中——把块状元素改为inline行内元素（也可以改成inline-block行内块级元素），然后给父元素加上text-align:center来实现水平居中。

.m1{
    				width: 300px;
    				height: 300px;
    				border: 1px solid red;
    				text-align: center;
    			}
    			.m2{
    				width: 200px;
    				height: 200px;
    				border: 1px solid blue;
    				display: inline-block;
    }

[比较全的链接][Link 1]

[Link 1]: http://blog.sina.com.cn/s/blog_c112a2980102xt3y.html

发表评论取消回复

表情：

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

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

相关阅读

相关 css 盒子水平垂直居中

<div class="container"> 　　<div class="content">我是内容盒子</div> </div> 　　

向右看齐/ 2023年08月17日 15:40/ 0 赞/ 145 阅读

相关 CSS 面试题——盒子水平垂直居中

CSS 面试题——盒子水平垂直居中方法一：通过定位(三种方法) 1、已知盒子宽高 html,body{ margin: 0;

迷南。/ 2023年07月04日 12:50/ 0 赞/ 29 阅读

相关 css 水平居中

1.水平居中的margin:0 auto，这个是用于块级元素上。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

浅浅的花香味﹌/ 2023年06月16日 08:07/ 0 赞/ 23 阅读

相关面试题：CSS盒子水平居中、垂直居中、水平垂直居中

目录 1. 实现盒子水平垂直居中方法一：定位（1）方法二：定位（2）

比眉伴天荒/ 2023年02月26日 11:28/ 0 赞/ 96 阅读

相关 css 实现水平居中

[https://www.cnblogs.com/00feixi/p/101168][https_www.cnblogs.com_00feixi_p_101168] 点开;

谁践踏了优雅/ 2023年02月21日 04:50/ 0 赞/ 13 阅读

相关 css 实现水平垂直居中

一、通过设置子元素 .parent{ position: absolute; / 非static即可 / width: 500px;

忘是亡心i/ 2022年12月30日 10:39/ 0 赞/ 280 阅读

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

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

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

相关盒子水平居中（详解）

掌握盒子水平垂直居中的五点方案定位（有三种方式） display：flex JavaScript display：table-cell 定位

女爷i/ 2022年10月16日 13:19/ 0 赞/ 183 阅读

相关 CSS 实现水平居中与垂直居中

面试时遇到这个问题，当时答得很不全面，有必要做个总结。一、水平居中的实现 -------------------- 1. 行内元素解决方案在行内元素的父级

左手的ㄟ右手/ 2022年05月27日 05:51/ 0 赞/ 388 阅读

相关 css实现盒子水平居中

展示4种，有两个元素，父盒子和子盒子。 div: <div class="m1"> <div class="m2"></div> </div

古城微笑少年丶/ 2022年02月12日 21:09/ 0 赞/ 271 阅读