4.1 实现图片左右垂直居中 · CSS

[toc] ### css中: 实现图片左右垂直居中的两种方式 >#### 1. background设置背景位置 > 如下代码，通过background-position: center center实现居中 ``` <body> <div class="center"> </div> </body> ``` ``` .center { height: 100px; width: 100px; background: aqua url("images/location.png") no-repeat center center; } ``` >#### 2. 通过position定位居中 ``` <div class="center"> <img src="images/location.png"> </div> ``` ``` .center { height: 100px; width: 100px; background-color: aqua; } ``` 正常插入图片此时显示效果： ![](images/2.png) 通过设置绝对定位使之居中 : ``` img { /* --居中-- */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 此时，显示效果： ![](images/5.png) >#### 3. 绝对定位后设置定位为0，margin: auto; ``` .parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }