在css中用auto使div居中对齐

自己一直都这么认为,提升自己的能力,才是在任何地方能立足的基础,这些年一直希望自己在专业上保持进步。又思考一下,在各方面的能力上,其实还欠缺很多,一直在找时间弥补和提升,越来越发现,自己的不足之处越来越多。要充分肯定不够好的自己,不求全方位,只求在个别方面,做的够好。注定人的一生是焦虑的,注定人的一生是忙碌的,注定人的一生有无限种可能,相信任何时候,张开眼,都能看到希望。

感慨发完了,今晚看完演出,回到房间里,刷了一段css视频,视频上讲的是使用auto使div居中对齐,我亲自试了一下。写了一个div,如下:

醉里挑灯看剑,梦回吹角连营;八百里分麾下炙,五十弦翻塞外声,沙场秋点兵。

在div上加的样式如下:

.div1 {
		width: 200px;
		height: 200px;
		border: black solid 3px;
		background-color: pink;
	}

效果如下图:

在css中用auto使div居中对齐_第1张图片

我如果加上margin-left: auto;,即代码如下

.div1 {
		width: 200px;
		height: 200px;
		border: black solid 3px;
		background-color: pink;
		margin-left: auto;
	}

则div移向右侧,即右对齐,如下:

在css中用auto使div居中对齐_第2张图片

我如果加上margin-right: auto;,即代码如下

.div1 {
		width: 200px;
		height: 200px;
		border: black solid 3px;
		background-color: pink;
		margin-right: auto;
	}

则div移向左侧,即左对齐,如下:

在css中用auto使div居中对齐_第3张图片

那么如何居中对齐呢,同时加上margin-right: auto; 和margin-left: auto;就可以,代码如下:

.div1 {
		width: 200px;
		height: 200px;
		border: black solid 3px;
		background-color: pink;
		margin-right: auto;
		margin-left: auto;
	}

效果如下:

在css中用auto使div居中对齐_第4张图片

 

 

 

你可能感兴趣的:(实际案例,技术问题解决,css,html,web)