-
2 你可以使用 柔性接线盒 应用 显示：flex； 和 对齐项目：居中； justify-content：中心 – bpardo公司 2021年3月2日16:50
27个答案
<body> <div style=“width:800px；margin:0 auto；”> 居中的内容 </div> </body> 
-
50 -
67 只需确保将“text-align:center”应用于<body>，否则IE6将不会使div居中。然后添加text-alignt:left； 给你的女主角。 2009年6月5日15:08 -
2 -
1 -
6
#输出弹出窗口{ 位置：绝对； 宽度：300px； 高度：200px； z指数：15； 最高：50%； 左：50%； 边距：-100px 0 0-150px； 背景：红色； } <div id=“outPopUp”> 
-
16 谢谢，你的答案是唯一的跨浏览器解决方案，应该被接受。。。 值得一提的是，如果在顶部和底部有其他div，它也可以与“position:relative”一起使用（在本例中，只有“left:50%”和“margin:0px-150px；”是重要的）。 – 马库斯 2013年11月22日14:51 -
4 -
1 -
7 -
1
<div class=“container”> 中心 </div> .容器{ 显示：flex； justify-content：中心； } .容器{ 显示：flex； justify-content：中心； } .中心{ 宽度：400px； 填充：10px； 背景：#5F85DB； 颜色：#fff； font-weight：粗体； font-family：宋体； } <div class=“container”> <div class=“center”>居中div，文本左对齐</ div（分频）> </div> 
<div> div公司{ 显示：表格； 边缘-右侧：自动； 左边距：自动； } 
你的意思是你想把它垂直居中还是水平居中？ 你说你指定了 高度 设置为800像素，并希望在 宽度 比那更伟大。。。 要水平居中，可以使用 边距：自动； CSS中的属性。 此外，您必须确保 身体 和 html格式 元素没有任何边距或填充：
html，正文{边距：0；填充：0；} #centeredDiv{margin-right:自动；margin-left:自动；宽度：800px；} 
<body> <div class=“centered”> 以内容为中心 </div> </body> 车身{ 边距：0； 填充：0； 文本对齐：居中；/**/ } .居中{ 边距：0自动； 文本对齐：左； 宽度：800px； } 
<div class=“center”><div> .中心{ 位置：绝对； 左：50%； 最高：50%； -moz变换：平移（-50%，-50%）；/* 火狐浏览器*/ -ms-transform：翻译（-50%，-50%）；/* 工业工程9*/ -webkit-transform:翻译（-50%，-50%）；/* Safari和Chrome*/ -o转换：转换（-50%，-50%）；/* 歌剧*/ 转换：转换（-50%，-50%）； /*可选大小（px或%）：*/ 宽度：100px； 高度：100px； } 
-
-
@PeterMortensen我改进了我的答案，将链接替换为具有类似解决方案的新链接，并在答案中添加代码，以防止将来出现此类问题（仅链接的答案不好）。 还删除了第一个解决方案的链接，因为它实际上并不太好。 – 威尔特 2019年3月24日16:19 -
-
<div style=“width:60%；margin:0px auto；”> 您在此处的内容。。。 </div> 
<body> <中心> …此处是您的代码。。。 </中心> </body> 
边距自动LR { 边缘-右侧：自动； 边缘左侧：自动； } .div类 { 宽度：300px； 边缘-右侧：自动； 边缘左侧：自动； } 
正文{/*居中*/ 显示：框； flex-align：中心； flex-pack：中心； } 
隐藏在外部样式表链接中的其他类。 其他类嵌入到类似 国际货币基金组织 （与旧的外部CSS打印格式控件类似）。 带有ID和/或CLASSES的图例代码将与命名的 div公司 类。
车身{ 文本对齐：居中； } 主体*{ 文本对齐：初始； } 车身隔板{ 显示：嵌入式块； } 所有直接内联子元素（例如。 <h1> )第页，共页 <中心> 也将定位在中心 内联块元素可以有不同的大小（比较 显示：块 设置）根据浏览器默认值
.box内容{ 边距：自动； 顶部：0； 右：0； 底部：0； 左：0； 位置：绝对； 宽度：800px； 高度：100px； 背景色：绿色； } <div class=“框内容”> </div> 
HTML格式
<div id=“超级容器”> <div id=“middlecontainer”> 第一个 <div id=“container”> 秒 第三名 </div> </div> </div> CSS公司
车身{ 边距：0； 填充：0； } .普通{ 边框：1px纯黑色； } #超级容器{ 宽度：1200px； 背景：浅绿色； 浮动：左； } #中间集装箱{ 浮动：左； 宽度：104px； 边距：0 549px； } #集装箱{ 浮动：左； } #第一个{ 背景：红色； 高度：102px； 宽度：50px； 浮动：左； } #秒{ 背景：绿色； 高度：50px； 宽度：50px； } #第三{ 背景：黄色； 高度：50px； 宽度：50px； } 
父母{ 位置：相对； } 孩子{ 位置：绝对； 左：50%； 转换：translateX（-50%）； } <父级> <儿童> </child> </父级> 
html中， 车身， .容器{ 高度：100%； 宽度：100%； } .容器{ 显示：flex； 对齐项目：居中； justify-content：中心； } .mydiv文件{ 宽度：80px； } <div class=“container”> <div class=“mydiv”>h&v对齐</div> </div> 
-
这应该是公认的答案。。。。 – 用户8967105 2020年6月8日14:20
正文，html{ 显示：表格； 高度：100%； 宽度：100%； } .容器{ 显示：table-cell； 垂直对齐：中间； } .容器.box{ 宽度：100px； 高度：100px； 背景：红色； 边距：0自动； } 
html格式{ 显示：表格； 高度：100%； 宽度：100%； } 车身{ 显示：table-cell； 垂直对齐：中间； } .内容{ 边距：0自动； 宽度：260px； 文本对齐：居中； 背景：粉红色； } .居中{ 位置：绝对； 显示：嵌入式块； 左：-500px； 宽度：1000px； 利润率：0 50%； } 
<div class=“loadingImg”></div> .加载Img{ 位置：固定； 顶部：0px； 左：0px； z指数：9999999； 边框：0； 背景：url（'../images/loading.gif'）无重复中心； 背景尺寸：50px 50px； 显示：块； 边距：0自动； -webkit-border-radius:50px； 边距：50px； } $（“.loadingImg”）.css（“高度”，$（文档）.height（））； $（“.loadingImg”）.css（“width”，$（document）.width（））； $（“.loadingImg”）.show（）； 
<body> <div style=“display:table；margin:250 auto；”> 在中间 </div> </body> 
.中心{ 文本对齐：居中； 高度：100%； /*Safari、Opera和Chrome*/ 显示：-webkit-box； -webkit-box-pack：中心； -webkit-box-align：居中； /*火狐浏览器*/ 显示：-moz-box； -moz-box-pack：中心； -moz-box-align：中心； /*Internet Explorer 10*/ 显示：-ms-flexbox； -ms-flex-pack：中心； -ms-flex-align：中心； } 
获取屏幕的宽度。 然后剩余25%的利润 使利润率右移25%
<div class='container'width='device-width'id='updatedContent'> <p id=“我的内容”></p> <contents></contents> <目录> </div> if（$（“#myContent”）.parent===$（“updatedContent”（更新内容）） { $（“#myContent”）.css({ “左”：“-（设备宽度/0.25）像素”； “右”：“-（设备宽度/0.225）像素”； }); } 