内部网站建设、,横琴建设局网站,嘉兴网站搜索优化,域名购买一般多少钱目录 垂直居中
行内元素垂直居中
单行文本垂直居中
1.line-height: 200px;
多行文本垂直居中
1.tablevertical-align:middle
块级元素垂直居中
1.display: flex;align-items: center;
2.使用position top margin-top
水平居中
行内元素水平居中
1.text-align:cente…目录 垂直居中
行内元素垂直居中
单行文本垂直居中
1.line-height: 200px;
多行文本垂直居中
1.tablevertical-align:middle
块级元素垂直居中
1.display: flex;align-items: center;
2.使用position top margin-top
水平居中
行内元素水平居中
1.text-align:center
编辑
块级元素水平居中
1.margin: 0 auto;
垂直水平居中
行内元素垂直水平居中
1.文本属性line-heighttext-align
块级元素垂直水平居中
1.positiontransform 2.flexbox 垂直居中
行内元素垂直居中
单行文本垂直居中
1.line-height: 200px;
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;}span{line-height: 200px;}/style/headbodydivspan 垂直居中!/span/div/body
/html 多行文本垂直居中
1.tablevertical-align:middle
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;display: table;}span{display: table-cell;vertical-align: middle;}/style/headbodydivspan 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!/span/div/body
/html 2.flexalign-items
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}div{width: 200px;border: 1px solid red;height: 200px;display: flex;align-items: center;}/style/headbodydivspan 多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!多行垂直居中!/span/div/body
/html 块级元素垂直居中
1.display: flex;align-items: center;
不是所有的浏览器都可以兼容
2.使用position top margin-top
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlestyle.out{width: 500px;height: 500px;background-color: skyblue; position: relative; }.in{width: 100px;height: 100px;background-color: salmon;position: absolute;top: 50%;margin-top: -50px;}/style/headbodydiv classoutdiv classin/div/div/body
/html
兼容性较好 让一个块级元素垂直居中的八种方法_块元素垂直居中__张张张i的博客-CSDN博客
水平居中
行内元素水平居中
1.text-align:center
!DOCTYPE html
html
head
meta charsetutf-8
style.parent {text-align: center;}
/style
/head
bodydiv classparentspan123/span/div
/body
/html 块级元素水平居中
1.margin: 0 auto;
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.child {background: skyblue;width:200px;height:200px;margin: 0 auto;}/style
/head
bodydiv classparentdiv classchild/div/div
/body
/html垂直水平居中
行内元素垂直水平居中
1.文本属性line-heighttext-align
文本属性的话如果你的行内元素是文本你可以使用line-height和text-align来实现水平和垂直居中
!DOCTYPE html
html
head
meta charsetutf-8
style.parent {width: 500px;height: 500px;background-color: aqua;}span{text-align: center;line-height: 500px;}
/style
/head
bodydiv classparentspan123/span/div
/body
/html 块级元素垂直水平居中
1.positiontransform
.container 元素被设置为相对定位以作为 .content 元素的定位参考。.content 元素被绝对定位到 .container 内然后使用 top: 50%; left: 50%; 将其移动到容器的中心。最后transform: translate(-50%, -50%); 用于微调元素的位置使其完全居中。
!DOCTYPE html
html
head
style.container {position: relative;width: 100%;height: 100vh; /* 或者其他适当的高度 */background-color: aqua;
}.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
/style
/head
bodydiv classcontainerdiv classcontent要居中的内容/div
/div/body
/html 2.flexbox
!DOCTYPE html
html
head
style.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 使容器铺满整个视口高度 */background-color: lightgray;}.content {display: inline-block; /* 将元素设置为行内块元素 */padding: 20px;background-color: white;}
/style
/head
bodydiv classcontainerdiv classcontent要居中的内容/div
/div/body
/html大多数现代浏览器都支持它。然而如果你需要考虑更旧的浏览器特别是IE9及更早版本Flexbox的支持可能会有限
参考文章来自
元素居中的N种方法 - 掘金
css 水平居中8种方法、垂直居中8种方法 - 掘金 (juejin.cn)
