CSS如何居中啊？

LovelyFoshou 2020-07-13 07:30:09

就是将一个div居中在html页面上。

...全文

11904 28 打赏收藏转发到动态举报

写回复

用AI写文章

28 条回复

切换为时间正序

请发表友善的回复…

发表回复

尚稻山 2020-09-12

打赏
举报

我觉得这是一个炸鱼问题= =

Teal-in 2020-09-04

打赏
举报

1、margin：auto; 2、text-align:center; 3、position: absolute; left:50%; tansform:tanslateX(-50%); 4、...

一叶知秋~ 2020-09-03

打赏
举报

margin:0px auto;

李溏 2020-08-24

打赏
举报

块级元素水平垂直居中
1、给父元素设置相对定位，给子元素设置绝对定位，给子元素设置left、right、top、bottom设置为0，给子元素设置margin:auto；
2、给父元素设置绝对定位，给子元素设置绝对定位，给子元素设置top:calc(50%-子元素的高度的一半)
left:calc(50%-子元素的宽度的一半)
3、给父元素设置绝对定位
给子元素设置绝对定位
给子元素设置top:子元素高度的一半
给子元素设置left:子元素宽度的一半
4、给父元素设置绝对定位
给子元素设置绝对定位
给子元素设置Left top为父元素的50%
给子元素设置margin-left为子元素宽度的一半
给子元素设置margin-top为子元素高度的一半

冬天的窗 2020-08-22

打赏
举报

text-align: center; 就自己在style里定义一个然后写这个

AAAAA人人爱 2020-08-19

打赏
举报

两种居中方法： ①：posituion:absolute; top:0; left:0; bottom:0; right:0; margin:0 auto; ②：position:absolute; top:50%； left：50%； margin-top:(-高一半)； margin-left(-宽一半)；

odoo开发 2020-08-15

打赏
举报

display:flex;justify-content:center align-item:center

大帅哥多金 2020-08-13

打赏
举报

*{ margin:auto; padding:auto; }这个？还是别的？

qq_25073223 2020-08-06

打赏
举报

我看见这里比较全的关于div水平和垂直居中的方法，请查阅

柠檬没你酸。 2020-08-05

打赏
举报

clac计算也行

bingduYu 2020-08-05

打赏
举报

margin:auto，或者用fixed定位，上下左右都为0，然后再加一个margin:auto;

Smell_White 2020-07-28

打赏
举报

有宽的话用 margin:auto; 没宽的话用定位 position:abolute; left:50%; transfrom:translateX(-50%);

御前代码侍卫 2020-07-28

打赏
举报

[

两种居中，看你要的那种。

ベ远行ミ 2020-07-28

打赏
举报

父级一定要有宽高
（1）
body{
width:100vw;
height:100vh;
}
div{
postion:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
（2）flex布局
display:flex;
align-items: center;
justify-content: center;
（3）计算
宽高：（父级-子集）/2

codefan※ 2020-07-19

打赏
举报

font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;

青语csl 2020-07-18

打赏
举报

https://blog.csdn.net/mrwangweijin/article/details/79760884?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-1.nonecase 可以参考一下这篇博客，挺详细的。。。题目名是15种CSS居中的方式

一介青烟小生 2020-07-18

打赏
举报

flex的布局也可以啊

LovelyFoshou 2020-07-18

打赏
举报

引用 3 楼 Boiled_meat 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <style> *{ padding: 0px; margin: 0px; } body,html{ width: 100%; height: 100%; position: relative; } div{ border: 1px solid black; width: 50%; height: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <div></div> </body> </html>

就是这个。

LovelyFoshou 2020-07-18