css居中的一些方法

新时代农民小工

于 2019-12-06 13:50:03 发布

阅读量135

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/hjj_flowers/article/details/103421107

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

常用简单的css居中的几种方法：

1.margin（必须有宽度）

<style type="text/css">
	#box{
	    width: 200px;
		background-color: pink;
	    margin: 0 auto;
	    text-align: center; /*盒子内部元素居中 */
	}
</style>
</head>
<body>
    <div id="box">555</div>
</body>

在这里插入图片描述
2.定位（宽高定不定都可以）

<style type="text/css">
	#box{
		background-color: pink;
		position: absolute;
		left: 50%;
		transform: translateX(-50%)
	}
</style>
</head>
<body>
    <div style="position: relative;"><div id="box">555</div></div>
</body>

在这里插入图片描述
3.flex弹性布局（宽高定不定都可以）

<style type="text/css">
	#box{
		background-color: pink;
	}
</style>
</head>
<body>
    <div style="display:flex;justify-content:center">
	    <div id="box">555</div>
    </div>
</body>