HTML元素水平居中和垂直居中
生活随笔
收集整理的這篇文章主要介紹了
HTML元素水平居中和垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目標：設置html元素水平居中和垂直居中，介紹三種方法。
方法一：推薦，兼容性好，沒有沖突
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div.box {height: 400px;width:200x;/* 給元素設置定位 */position:absolute;left: 50%;top: 50%;/* 設置為自身寬度的負一般 */margin-left: -100px;/* 設置為自生高度的負一半 */margin-top: -200px;}</style> </head><body><div class="box"></div> </body></html>2.第二種:兼容性不好只支持IE9以上瀏覽器
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div.box{height: 400px;width: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style> </head><body><div class="box"></div> </body></html>3.第三種：兼容性好但是不支持IE7一下版本
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div.box {height: 400px;width: 200px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}</style> </head><body><div class="box"></div> </body></html>總結
以上是生活随笔為你收集整理的HTML元素水平居中和垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Ioc注解式开发中注解的作
- 下一篇： javascript常用的事件