⾃⼰做的⽹站效果⽰例
div相对于页⾯⽔平居中显⽰：
核⼼代码：margin：0 auto；
/意思为:div的外边距上下为0px，左右居中显⽰;/
/前提是position为相对定位；不能为absolute绝对定位/
**绝对定位：**是脱离⽂档流，所以margin⽆效；它是⼀个虚体；任何元素都可以穿过它
**相对定位：**是偏移某个距离，且保持未定位签的形状，它原本所占的空间仍保留。margin有效；它是⼀个实体；
⽂字⽔平居中显⽰(相对于简单⽂本居中)：
核⼼代码：text-align: center;
⽤法：
1、div中直接写css代码：text-align: center;
2、在div⼦级⽂本标签中写：text-align: center;
解释：
/意思为:⽂本对齐⽅式为：中⼼;
前提是⼀个div包着，参照物为div/
⽂字垂直居中显⽰：
核⼼代码：line-height:30px;
⽤法：
java工作哪个网站好div：height:30px;
div中的⽂字：line-height: 30px;
解释：
黄页查企业名录/意思为：离线⾼度为30px;/
/
前提有两个:
1 页⾯本⾝有margin(外边距)和padding(内边距)：所以，都要设置为0px;
2 与⾃⼰的⽗级(或div)⾼度要设置⼀致;/
⽂字⽔平居中显⽰(相对于导航栏浮动的多个⽂本居中)：
适⽤：导航栏中浮动后⽂本为多个⽽且之间都有间距的⽅法；
⽤法：
div：width: 150px;
div 中的⽂字：
padding-left:22.5px;
margin-left: 22.5px;
font-size: 30px;
解释：
div⽗级设置宽度；
div中的⼦级设置它的内边距和外边距为⽗级宽度的四分之⼀；
前提字体设置宽度，⽗级宽度减去每个字体⼤⼩，再除以四分之⼀
图⽚和⽂本垂直居中
设置css使⽂字和图⽚同排同⾏时候上下垂直居中
img{ vertical-align:middle;}
思维拓展：
text-align: center;
属性规定元素中的⽂本的⽔平对齐⽅式。
设置块级元素内⽂本的⽔平对齐⽅式
调整⾏内容中字母和字之间的间隔
text-align ：justify
transient记忆方法实现两端对齐⽂本效果。
align-items: center; /垂直居中/
justify-content: center; /⽔平居中/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
反向代理和负载均衡的区别>seek过去式和过去分词<title>cssdiv、⽂字、图⽚居中</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.div_one{
position: relative;
position: relative;
border:1px solid red;
width:1000px;
html个人网页完整代码图片
height:100px;
margin:0 auto;
/
*意思为:div的外边距上下为0px，左右居中显⽰;*/
/*前提是position为相对定位；不能为absolute绝对定位*/
/*text-align: center;*/
}
.div_one p{
font-size: 20px;
text-align: center;
/*意思为:⽂本对齐⽅式为：中⼼;
前提是⼀个div包着，参照物为div*/
line-height: 100px;
/*意思为：离线⾼度为100px;*/
/
*前提有两个:
1 页⾯本⾝有margin(外边距)和padding(内边距)：所以，都要设置为0px;
2 与⾃⼰的⽗级(或div)⾼度要设置⼀致;*/
}
.div_two{
top: 100px;
position: relative;
border:1px solid green;
width:1000px;
height:300px;
margin:0 auto;
text-align: center;
}
.div_two img{
width:300px;
height: 200px;
/*align-content: center;
align-items: center;*/
/*justify-content: center;*/
transform:translateY(25%);
/*vertical-align:200%;*/
/*line-height: 300px;*/
/
*margin-left: 175px;
padding-left: 175px;*/
}
</style>
</head>
<body>
<div class = "div_one">
<p>div居中和字体居中和字体垂直居中</p>
</div>
<div class = "div_two">
<img src="img/潮流动图4.jpg"/>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。