1.水平居中-行内元素-父级为行内元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #father{ width: 500px; height: 500px; background-color: #0000FF; /* 若该元素不为块级元素，则把这个元素当作块级元素处理 */ display: block; text-align: center; } </style> </head> <body> <span id="father"> 水平居中-行内元素-父级为行内元素 </span> </body> </html>
实现效果：
2.水平居中-行内元素-父级为块元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>居中实例</title> <style type="text/css"> #father{ width: 500px; height: 500px; background-color: #0000FF; text-align: center; } </style> </head> <body> <!-- 行内元素 --> <!-- 且父元素为块级元素 --> <div id="father"> <span id="son"> 水平居中-行内元素-父级为块元素 </span> </div> </body> </html>
实现效果：
3.水平居中-块级元素-子元素为定宽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #father{ width: 500px; height: 500px; background-color: #0000FF; } #son{ background-color: #FF0000; /* 间接的通过左右外边距自动挤出来一个居中的效果 */ margin: 0 auto; width: 200px; } </style> </head> <body> <!--如果子元素为块级元素，想要有包裹效果，父级元素必须是块级元素 --> <div id="father"> <div id="son"> 水平居中-块级元素-子元素为定宽 </div> </div> </body> </html>
实现效果：
4.水平居中-块级元素-子元素为不定宽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #father{ width: 500px; height: 500px; background-color: #0000FF; text-align: center; } #son{ background-color: #FF0000; /* 间接的通过左右外边距自动挤出来一个居中的效果 */ display: inline; } </style> </head> <body> <div id="father"> <div id="son"> 水平居中-块级元素-子元素为不定宽 </div> </div> </body> </html>
实现效果：
5.垂直居中-行内元素-单行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #father{ width: 500px; height: 500px; background-color: #0000FF; } #son{ background-color: #DC143C; /* 如果只有一行可以取巧，设置文本行高等于父容器的高度 */ line-height: 500px; } </style> </head> <body> <div id="father"> <span id="son"> 我是单行的行内元素 </span> </div> </body> </html>
实现效果
6.垂直居中-行内元素-多行/垂直居中-块级元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #father{ width: 500px; height: 500px; background-color: #0000FF; /* 把父元素当作table中的一个格子 */ display: table-cell; /* 单行也可以使用这种方式 */ vertical-align: middle; } #son{ background-color: #DC143C; } </style> </head> <body> <div id="father"> <span id="son"> 我是多行的行内元素 </span> </div> </body> </html>
实现效果：
