html5文本/块级居中问题

文本居中

  • 单行文本居中一
    设置line-height=height,如下代码:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.wrap{
				width: 300px;
				height: 300px;
				margin: 20px auto;
				border: 1px solid red;
				/*让line-height=height即可*/
				line-height: 300px;
				text-align: center;
			}
		style>
	head>
	<body>
		<div class="wrap">
			<p>ni hao wei duo kep>
		div>
	body>
html>
  • 单行文本居中二
    (同时也适用于多行文本居中)
    让父元素有table属性,子元素设置display: table-cell;
    vertical-align: middle;缺一不可,如下代码:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.wrap{
				/*让父元素有table属性;*/
				display: table;
				width: 300px;
				height: 300px;
				margin: 20px auto;
				border: 1px solid red;
				text-align: center;
			}
			p{
				/*子元素如下,缺一不可*/
				display: table-cell;
				vertical-align: middle;
			}
		style>
	head>
	<body>
		<div class="wrap">
			<p>ni hao wei duo kep>
			
		div>
	body>
html>
  • 多行文本居中
    巧用span占位作用,如下代码:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.wrap{
				width: 300px;
				height: 300px;
				margin: 20px auto;
				border: 1px solid red;
				text-align: center;
			}
			p{
				display: inline-block;
				vertical-align: middle;
			}
			/*span占位作用*/
			span{
				display: inline-block;
				height:100%;
				border: 1px solid #000;
				vertical-align: middle;
			}
		style>
	head>
	<body>
		<div class="wrap">
			<p>ni hao wei duo ke<br/>
			   ni hao wei duo ke<br/>
			   ni hao wei duo ke
			p>
			
			<span>span>
		div>
	body>
html>

块级居中

  • 子绝父相,加top,left,margin;如下代码:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		 .father{
			 /*相对定位*/
			 position: relative;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 position: absolute; /*绝对定位*/
			 width: 100px;
			 height: 100px;
		 /*top,left设置必不可少*/
			 top: 50%;
			 left: 50%;
 /*margin的属性设置此时为该块级宽高的负一半,如下*/
			 margin: -50px 0 0 -50px;
			 background-color:red;
		 }
		style>
	head>
	<body>
		<div class="father">
			<div class="son">div>
		div>
	body>
html>
  • 子绝父相,加top,left,bottom,right为零,还有margin=auto,如下代码:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		 .father{
		    /*父,相对定位*/
			 position: relative;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 /*子,绝对定位*/
			 position: absolute;
		/*top,left, right,bottom为0px*/
			 top: 0px;
			 left:0px;
			 bottom: 0px;
			 right: 0px;
		  /*margin不可少*/
			 margin: auto;
			 width: 100px;
			 height: 100px;
			 background-color:red;
		 }
		style>
	head>
	<body>
		<div class="father">
			<div class="son">div>
		div>
	body>
html>
  • 用box-sizing属性加padding,如下:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		 .father{
			 width: 300px;
			 height: 300px;
/*padding(父width300-子width100)/2=100px*/
			 padding: 100px;
		/*设置box-sizing属性*/
			 box-sizing: border-box;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 width: 100px;
			 height: 100px;
			 background-color:red;
		 }
		style>
	head>
	<body>
		<div class="father">
			<div class="son">div>
		div>
	body>
html>
  • 用占位盒子设置居中,如下
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		 .father{
		    /*父,相对定位*/
			 position: relative;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		.floater{
			 float: left;
			 width: 100%;
			 height: 50%;
			/*设置为子元素高的负一半*/
			 margin-bottom: -50px;
			 border: 1px solid #FFFFFF;
		 }
		 .son{
			clear: both;
			 width: 100px;
			 height: 100px;
		  /*此时margin设置水平居中*/
			 margin: 0 auto;
			 background-color:red;
		 }
		style>
	head>
	<body>
		<div class="father">
			
			<div class="floater">div>
			<div class="son">div>
		div>
	body>
html>
  • 父元素设置用display,justify-content,align-items来居中
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		 .father{
/*用display,justify-content,align-items设置居中*/
		     display: flex;
			 justify-content: center;
			 align-items: center;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 width: 100px;
			 height: 100px;
			 background-color:red;
		 }
		style>
	head>
	<body>
		<div class="father">
			<div class="son">div>
		div>
	body>
html>
  • (图片在盒子内居中)
    设置 line-height,text-align: center, vertical-align: middle, 如下:
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
		 .father{
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 border:1px solid red;
		  /*设置line-height=hight,
		    还有 text-align: center;*/
			 line-height: 300px;	
			 text-align: center;
		 }
		 img{
			 width: 100px;
			 height: 100px;
			 vertical-align: middle;
		 }
		style>
	head>
	<body>
		<div class="father">
			<img src="img/1.png" >
		div>
	body>
html>

你可能感兴趣的:(html,html5,javascript,css,css3)