前端学习之旅(六)【定位元素居中】

任务一

实现已经设计好的元素在父元素中水平方向填充满。

设计好的元素展示:

前端学习之旅(六)【定位元素居中】_第1张图片

想要实现的效果:

前端学习之旅(六)【定位元素居中】_第2张图片

代码

实现前的代码:





    
    定位元素居中
    



    
居中

实现效果的代码





    
    定位元素居中
    



    
居中

任务二

实现已经设置好宽高的定位元素在父元素中居中

原本的样式

前端学习之旅(六)【定位元素居中】_第3张图片

需要的样式

前端学习之旅(六)【定位元素居中】_第4张图片

代码

实现前的代码





    
    定位元素居中
    



    
居中

实现后的代码





    
    定位元素居中
    



    
居中

总结

定位元素居中,可以使用通常认为不正确的代码。前端需要学习的东西太多啦,还需要不断努力啊!!!

你可能感兴趣的:(B大学前端,学习,前端,html,css)