1.inline-block + text-align

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>水平居中</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<style type="text/css">body{margin:20px;}.parent{text-align: center;}.child{display: inline-block;}
</style>
</head>
<body>
<div class="parent"><div class="child">DEMO</div>
</div>
</body>
</html>

2.table + margin

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>水平居中</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<style type="text/css">body{margin:20px;}.child{display: table;margin: 0 auto;}
</style>
</head>
<body>
<div class="parent"><div class="child">DEMO</div>
</div>
</body>
</html>

3.absolute + transform

4.flex + justify-content

CSS实现水平居中的四种方法相关推荐

CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
前端面试题：使用css生成田字格的四种方法
使用css生成田字格的四种方法 html结构 css基础样式第一种 flex布局第二种绝对定位第三种 css瀑布流第四种 float浮动 html结构 <div class=" ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用,并且得到了广泛的支持.该b ...
CSS引入样式的四种方法及优先级顺序
CSS引入样式的几种方法 css可以通过4种方式引入样式表根据不同的需求可以选择不同的引入方式但是它们也有不同的优缺点行内样式嵌入式样式外部样式 @import 导入的方式 1.行内样式特 ...
HTML和CSS隐藏元素的四种方法
第一种:display:none 特点:不占据屏幕空间显示:display:block <!DOCTYPE html> <html lang="en">& ...
css清除浮动的四种方法(详细)
浮动带来的影响清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题看下面一段代码 <div class="fater"><div class ...
CSS实现三角形的四种方法
方法一:使用 border (常见) [解释]不设置宽高,用边框大小控制三角型大小 [分解步骤] 设置一个div不设宽高 [示例] <style>#triangle{width: 0;he ...
CSS实现: 水平居中的几种方法
实现方法: 1.添加 margin 值 auto 2.定位 position(子绝父相) + 偏移值 left + margin-left 回退 [ 需要计算,有点麻烦 ] 3.定位 positio ...

CSS实现水平居中的四种方法

1.inline-block + text-align

2.table + margin

3.absolute + transform

4.flex + justify-content

CSS实现水平居中的四种方法相关推荐

最新文章

热门文章