1、文本内容居中对齐:text-align。
扩展用法：父元素嵌套子元素时，且子元素的宽度小于父元素宽度，使用text-align:center，可以实现子元素的居中对齐。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本内容水平居中</title> 6 <style> 7 .text-center{ 8 border:3px solid red; 9 text-align: center; 10 /*text-align: right;*/ 11 } 12 </style> 13 </head> 14 <body> 15 <div class="text-center"> 16 水平居中对齐 17 </div> 18 </body> 19 </html>
2、图片居中对齐:先指定width,display:block(前提)，再使用margin:auto。(非块级元素使用margin:auto时，不会居中，必须指定display:block，才会居中)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片水平居中对齐</title> 6 <style> 7 8 /* 9 margin:auto，对行内元素不起作用，所以需要把图片display:block，变成一个块级元素，同时设置图片的width， 10 margin:auto才会起作用 11 */ 12 img{ 13 display: block; 14 margin: auto; 15 width: 200px; 16 height: 200px; 17 } 18 </style> 19 </head> 20 <body> 21 <img src="./suihua.png" alt=""> 22 </body> 23 </html>
3、元素左对齐、元素右对齐、元素居中对齐
元素居中对齐:先指定width(前提)，再使用margin:auto
左右对齐解决方式一:position和left:0或right:0
左右对齐解决方式二:position和float:left或float:right
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>元素水平居中对齐、左对齐、右对齐</title> 6 <style> 7 8 /* 设置body元素的margin:0，padding:0，从而达到在所有浏览器一样的效果 9 不设置的情况下，不同的浏览器，body元素的margin和padding默认值不一样 10 */ 11 body{ 12 margin:0; 13 padding: 0; 14 } 15 16 /* 17 元素水平居中对齐：同时指定width和margin:auto就可以实现 18 不指定width，margin:auto不会起作用，实现不了水平居中对齐 19 */ 20 .center{ 21 border:3px solid red; 22 width: 50%; 23 margin: auto; 24 } 25 26 27 /*利用postion，加left:0或right:0，从而实现元素的左对齐和右对齐*/ 28 .container1{ 29 position:relative; 30 border: solid 3px red; 31 32 } 33 .right1{ 34 background-color: lightblue; 35 width: 200px; 36 height: 100px; 37 position: absolute; 38 right:0; /*右对齐*/ 39 /*left:0; 左对齐*/ 40 } 41 42 /*利用float*/ 43 .container2{ 44 position:relative; 45 border: solid 3px red; 46 overflow: auto; 47 } 48 49 .right2{ 50 background-color: lightblue; 51 width: 200px; 52 height: 100px; 53 float: right; 54 } 55 </style> 56 </head> 57 <body> 58 <h1>元素水平居中对齐</h1> 59 <div class="center"> 60 center align 61 </div> 62 63 <h1>元素水平左右对齐方式一</h1> 64 <div class="container1"> 65 <div class="right1"> 66 <p>段落的内容</p> 67 </div> 68 </div> 69 70 <br/><br/><br/><br/><br/><br/><br/> 71 72 <h1>元素水平左右对齐方式二</h1> 73 <div class="container2"> 74 <div class="right2"> 75 <p>段落的内容</p> 76 </div> 77 </div> 78 79 </body> 80 </html>
4、垂直居中对齐
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>垂直居中对齐</title> 6 <style> 7 /*垂直居中对齐实现方式一:通过padding属性来实现。(当元素指定了height，通过padding来实现垂直居中就不好使了)*/ 8 .center1{ 9 border: 3px solid red; 10 padding:100px 0; /*上下100px，左右0*/ 11 text-align: center; 12 } 13 /*组合选择器*/ 14 .center1 p{ 15 text-align: center; 16 } 17 18 19 /* 20 垂直居中对齐实现方式二:line-height等于元素的height,这样已经贴近居中了，还没有完全居中, 21 还需要结合下方的【.center2 p】组合选择器中的 display:inline-block 和 line-height:1 才能实现全部居中 22 */ 23 .center2{ 24 border: 3px solid red; 25 height: 200px; 26 line-height: 200px; 27 text-align: center; 28 } 29 30 .center2 p{ 31 text-align: center; 32 line-height: 1; 33 display:inline-block; 34 } 35 36 /*垂直居中对齐实现方式三:position*/ 37 .center3{ 38 border:3px solid red; 39 height:200px; 40 text-align: center; 41 position: relative; 42 } 43 44 .center3 p{ 45 text-align: center; 46 position: absolute; 47 margin: 0; 48 top: 50%; 49 left: 50%; 50 transform: translate(-50%,-50%); /*微调x,y轴方向,第一个-50%表示x轴往左移，第二个50%表示y轴往上移*/ 51 } 52 </style> 53 </head> 54 <body> 55 <h1>vertically align</h1> 56 <div class="center3"> 57 <p>段落的内容，希望它垂直居中</p> 58 </div> 59 </body> 60 </html>