div居中方法（共9种）

全栈程序员-站长 • 2026年3月18日下午8:50 • 未分类 • 阅读 1

div居中方法（共9种）

<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素 
     span>  
      div>

块级元素：为其自身设置margin:auto样式

<div style="width: 500px;height: 100px;border: 1px solid red;"> <div style="line-height: 100px;text-align: center;margin:auto;width: 100px;height: 100px;border: 1px solid gold"> 块级元素  
     div>  
      div>

），表格前后带有换行符.

display:table-cell;此元素会作为一个表格单元格显示（类似和）

<div style="display: table;width: 500px;height: 200px;border: 1px solid red;"> <div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素 
     div>  
      div>

<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px "> <div style="width: 100px;height: 100px;border: 1px solid gold">块级元素 
     div>  
      div>

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"> <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px"> 块级元素  
     div>  
      div>

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"> <div style="position:absolute;top:50%;left:50%;margin-left: -50px;margin-top: -50px; width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px"> 块级元素  
     div>  
      div>

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"> <div style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px"> 块级元素  
     div>  
      div>

<div style="position:fixed;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;z-index: 999; width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px"> 块级元素  
     div>

<div style="margin: 50vh auto 0;transform: translateY(-50%);line-height:100px width: 100px;height: 100px;border: 1px solid gold;text-align:center;"> 块级元素  
     div>

<div style="display: flex;width: 500px;height: 200px;border: 1px solid red;"> <div style="margin: auto;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px"> 块级元素  
     div>  
      div>

<div style="display: grid; place-items: center;"> <div> 块级元素  
     div>  
      div> // CSS // body { // display: grid; // place-items: center; // }

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/212104.html原文链接：https://javaforall.net

div居中方法（共9种）

关于作者

全栈程序员-站长

发表回复

div居中方法（共9种）

关于作者

全栈程序员-站长

相关推荐

胶南人才交流中心[通俗易懂]

SAE J1939 协议源代码分析(一)-程序结构框架

数据库设计工具MySQLWorkBench[通俗易懂]

大数据应用管理模式及内容

怎么查看maven仓库地址_修改maven本地仓库

idea如何查找替换_pycharm查找替换

发表回复