如何将元素水平居中
发布于2021-01-31 17:04 阅读(892) 评论(0) 点赞(28) 收藏(3)
如何使用CSS<div>在另一个文件中水平居中<div>？
<div id="outer">
<div id="inner">Foo foo</div>
</div>
解决方案
您可以将此CSS应用于内部<div>：
#inner {
width: 50%;
margin: 0 auto;
}
当然，您不必将设置width为50%。小于包含宽度的任何宽度<div>都可以使用。该margin: 0 auto是什么呢实际定心。
如果您以Internet Explorer 8（及更高版本）为目标，最好改用以下方法：
#inner {
display: table;
margin: 0 auto;
}
它将使内部元素水平居中，并且无需设置特定的即可工作width。
这里的工作示例：
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}<div id="outer">
<div id="inner">Foo foo</div>
</div>编辑
使用flexboxdiv可以轻松水平和垂直居中设置样式。
#inner {
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%;
display: flex;
justify-content: center;
}<div id="outer">
<div id="inner">Foo foo</div>
</div>要使div垂直居中对齐，请使用属性align-items: center。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/109/3b8598eddfbc1b3d67f4/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力