前言: Css中水平居中的问题非常常见, 下面就根据自己的经验和网上相关的文章总结有关Css水平居中的相关知识, 如果对你有帮助的话可以多多点赞哦!!!
1. 居中
1.1 水平居中
-
文本, 图片等行内元素水平居中
-
父级元素为块状元素
<style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> </head> <body> <div id="father"> <span id="son">我是行内元素</span> </div> </body> -
父级元素不是块级元素
思路: 设置父级元素为块级元素
<style> #father { display: block; width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> </head> <body> <span id="father"> <span id="son">我是行内元素</span> </span> </body>
-
-
块级元素水平居中
- 元素的宽度已知
思路: 直接设置
margin: auto或者margin: 0 auto<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #father { width: 500px; height: 300px; background-color: skyblue; } #son { width: 100px; height: 100px; background-color: green; margin: 0 auto; } </style> </head> <body> <div id="father"> <div id="son">我是块级元素</div> </div> </body> </html>-
元素的宽度未知
-
使用css3新特性transform
主要思路:
父级元素设置
position: relative本身设置为
position: absolute本身相对父级元素
left: 50%清除自身宽度的影响
transform: translateX(-50%);<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #father { width: 500px; height: 300px; background-color: skyblue; position: relative; } #son { height: 100px; background-color: green; position: absolute; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div id="father"> <div id="son">我是块级元素</div> <div class="other">主要内容区</div> </div> </body> </html>注意, 使用此种布局后面的元素需要注意absolute布局脱离文档流的影响
-
使用flex布局实现(推荐使用, 但不能兼容比较老的浏览器)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #father { width: 500px; height: 300px; background-color: skyblue; display: flex; justify-content: center; } #son { height: 100px; background-color: green; } </style> </head> <body> <div id="father"> <div id="son">我是块级元素</div> <div class="other">主要内容区</div> </div> </body> </html> -
设置子元素为行内元素, 同时设置父元素
text-align: center<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; } #son { height: 100px; background-color: green; display: inline-block; } </style> </head> <body> <div id="father"> <div id="son">我是块级元素</div> <div class="other">主要内容区</div> </div> </body> </html>
