div中的文字和图片水平居中的方法

css文字水平居中的案例1：

.page{text-align: center;}
<div class="page"><p>这是需要水平居中的文字</p></div>

css文字水平居中的案例2：

.page{display: flex;justify-content: center;}
<div class="page"><p>这是需要水平居中的文字</p></div>

css图片水平居中的案例1：

<div class="tu" align="center"><img src="img/1.jpg"></div>

css图片水平居中的案例2：

.tu img{display: block;margin:0 auto;}
<div class="tu"><img src="img/1.jpg" ></div>

css图片水平居中的案例3：

.tu{display: flex;justify-content: center;}
<div class="tu"><img src="img/1.jpg" ></div>

css图片水平居中的案例4：

.tu img{width: 100px;height: 100px;position: relative;left: 50%;margin-left: -50px;}
<div class="tu"><img src="img/1.jpg" ></div>

css图片水平居中的案例5：

.tu{text-align: center;}
<div class="tu"><img src="img/1.jpg" ></div>