html代碼

<div class="wrap"><div class="inner"></div> </div> 復制代碼

1. absolute+transform實現

style代碼

<style>.wrap {border: 1px solid palevioletred;height: 200px;width: 200px;position: relative;}.inner {border: 1px solid palevioletred;width: 50%;height: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);} </style> 復制代碼

left:50%中的百分比是相對于定位父級的寬度。
translate:50%是相對于自身的寬度。
缺點：ie9以上支持

2. absolute+margin實現

style代碼

<style>.wrap {border: 1px solid palevioletred;height: 200px;width: 200px;position: relative;}.inner {border: 1px solid palevioletred;width: 50%;height: 50%;position: absolute;top: 50%;left: 50%;margin-left: -25%;margin-top: -25%;} </style> 復制代碼

left:50%中的百分比是相對于定位父級的寬度。
margin:50%是相對于自身的寬度。

3.absolute+margin:auto實現

<style>.wrap {border: 1px solid palevioletred;height: 200px;width: 200px;position: relative;}.inner {border: 1px solid palevioletred;width: 50%;height: 50%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style> 復制代碼

3.flex+margin:auto實現

<style>.wrap {border: 1px solid palevioletred;height: 200px;width: 200px;display: flex;}.inner {border: 1px solid palevioletred;width: 50%;height: 50%;margin: auto;}</style> 復制代碼

4.flex實現

<style>.wrap {border: 1px solid palevioletred;height: 200px;width: 200px;display: flex;justify-content: center;align-items: center;}.inner {border: 1px solid palevioletred;width: 50%;height: 50%;}</style> 復制代碼

總結

以上是生活随笔為你收集整理的元素垂直水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。