容器的居中显示在网页设计中是很常见的， 居中显示可以获得视觉的焦点， 是内容更加突出， 下面就简单的说明一下如何在HTML中通过样式的控制来实现操作方式 01 最常见的一种， 代码示例如下图， 起首， 取big一半像素大小赋给small层， 经由过程margin: 0 auto; text-align: center来实现
文章插图
02 第二种方式， 代码示例如下图， 将big层的display设置为table-cell,然后small层的margin-left取（500-250）/2， 也就是125即可
文章插图
03 第三种方式， 代码示例如下图， 将big层的position设置为absolute， 然后small层的margin-left取（500-250）/2， 也就是125即可
文章插图
04 第四种方式， 经由过程display:flex实现， 代码示例如下图， big层display:flex;flex-direction:column;而small层align-self:center
文章插图
05 第五种方式， 在small层的宽度没有的时辰， 可以经由过程width:fit-content这个设置来完当作， 代码示例如下
文章插图
06 第六种方式， 经由过程display:inline-block来实现， 将这个设置赋给big层即可， 代码示例如下图
文章插图
07 【CSS水平居中的9种方法】第七种方式， 设置big层position:relative， 相对环境下， 使small层左浮动， 代码示例如下
文章插图
08 第八种方式， transform属性， 代码示例如下
文章插图
09 第九种方式， 借助第三方样式， 好比增添一个add节点， 程度浮动标的目的左， 使small层随之浮动， 代码示例如下
文章插图
出格提醒 每种方式都顺应分歧的运行情况， 现实操作时需要考虑分歧浏览器的解析时的兼容性
以上内容就是CSS水平居中的9种方法的内容啦， 希望对你有所帮助哦！
推荐阅读
- 在编写HTML时，怎样让DIV文字居中？
- ps选区怎么居中对齐
- 在word中怎样将表格整体相对于页面居中
- 食蟹猕猴吃什么食物
- Word表格文字无法居中对齐，总是偏右或偏下
- 怎样提高自己的拍照水平
- PS photoshop如何水平、垂直翻转
- 居家防护不求人，看完全家更安心
- 樊川居士是指哪位诗人 樊川居士是哪位诗人
- wps教程：wps如何居中