元素和内容居中
作者：互联网
元素和内容的居中方法
元素 : <标签名>内容</标签名>
标签 : <标签名>
内容 : xxx
代码
<style>
.main {
text-align: center;
}
/* marign */
.container {
width: 300px;
height: 100px;
margin: 0 auto;
}
.head {
width: 400px;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<!--
一:
text-align(文本，行内元素，行内块元素)
如果要让以上内容实现居中，给他们的父元素(块)设置 text-align属性
-->
<div class="main">hello world</div>
<div class="main">
<span>span标记</span>
</div>
<div class="main">
<img src="./img/logo.png" width="100" alt="" />
</div>
<div class="main">
<input type="text" />
</div>
<hr />
<!-- --------------------------------------------------- -->
<!-- margin:0 auto
二：块元素水平居中，直接给当前元素设置属性
-->
<div class="container"></div>
<!-- 三：垂直居中
line-height 单行文本 -->
<div class="head">我是头部页面</div>
还有后面所学的flex盒子、vertical-align方法
标签：居中,--,text,align,元素,height,内容 来源： https://www.cnblogs.com/YBYZ/p/16545487.html