HTML+css实现元素居中对齐的方法

HTML+css实现元素居中对齐的方法

1.line-height实现居中对齐

此种方法只适用于单行文本的居中,需要知道父元素的高度,通过line-height的高度等于父元素的height高度就可以实现垂直居中。以下是单行居中的例子。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			.main{
				width: 500px;
				height: 200px;
				background: skyblue;
			}
			.main p{
				text-align: center;/*文字水平居中*/
				line-height: 200px;
			}
		style>
	head>
	<body>
		<div class="main">
			<p>我水平方向和垂直方向都居中啦p>
		div>
	body>
html>

HTML+css实现元素居中对齐的方法_第1张图片
-------------------------------------------------------------------------------------------------------------------------------------------------分割线
一下的例子均可以对多行文字进行居中对齐;对齐的的对象不限于文,也可以是两个父子元素进行居中对齐;

4.使用absolute实行居中对齐

2.1absolute+margin实现

该方法需要知道父元素的宽和高,通过margin的的大小撑开一个距离从而实现居中。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			.main{
				position: relative;
				width: 500px;
				height: 200px;
				background: skyblue;
			}
			.main .box{
				position: absolute;
				width: 200px;
				height: 50px;
				left: 50%;
				top: 50%;
				margin-top: -25px;
				margin-left: -100px;
				background: gray;
			}
		style>
	head>
	<body>
		<div class="main">
			<div class="box">
				使用absolute+margin实现居中
			div>
		div>
	body>
html>

效果如下;
HTML+css实现元素居中对齐的方法_第2张图片

2.2通过absolute+transform实现

未知父元素的高度的情况下,通过给父元素position:relative,再给子元素position:absolute,通过translate即可定位到垂直居中的位置。translate(-50%,-50%)意思是相对自己向左边移动自身宽度一半的距离,向上相对自己向上移动自身高度一半的距离。
例子:


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.main{
				position: relative;
				width: 500px;
				height: 200px;
				background: skyblue;
			}
			.main p{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		style>
	head>
	<body>
		<div class="main">
			<p>transform实现垂直居中p>
		div>
	body>
html>

HTML+css实现元素居中对齐的方法_第3张图片

3.通过display:table-cell实现居中对齐

  1. 给快级父元素加display:table;属性,使得父元素成为块级表格;
  2. 给子元素加display:table-cell;属性,子元素成为列表元素
  3. 在给子元素加vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;
    此种方法可以给一大段文字做居中对齐的排版,文字会根据父元素的宽度自动换行,并且不许知道父元素的宽和高。
    例子如下;

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			.main{
				width: 500px;
				height: 200px;
				background: skyblue;
				display: table;
			}
			.main p{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
		style>
	head>
	<body>
		<div class="main">
			<p>给父元素加display:table;给子元素加display:table-cell;给子元素加vertical-align:middlep>
		div>
	body>
html>

HTML+css实现元素居中对齐的方法_第4张图片

4.通过flex布局实现居中对齐

父元素使用flex布局,并定义两个属性值justify-content,align-items都为center,那么就定义为水平垂直居中
justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
这种方法不需要知道父元素放的宽高。


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			.main{
				width: 500px;
				height: 200px;
				background: skyblue;
				display: flex;
				justify-content: center;  /*水平居中对齐*/
				align-items: center;  /*垂直居中对齐*/
			}
			.item{
				width: 200px;
				height: 30px;
				background: gray;
			}
		style>
	head>
	<body>
		<div class="main">
			<div class="item">div>
		div>
	body>
html>

HTML+css实现元素居中对齐的方法_第5张图片
父元素使用flex布局,并且加上justify-content: center;属性,子元素使用margin 0 auto;同样可以实现居中对齐。

你可能感兴趣的:(前端)