From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Center A positioned element

Center A positioned element - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Center A positioned element

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll be exploring two options for centering an absolute positioned element with CSS. Since the properties for position include top, right, bottom, and left, we'll need to account for the element's width in order to center the element horizontally, or the element's height to center it vertically. If you'd like to follow along with me, download the exercise files, and let's begin by opening index.html in a text editor. Once you have the HTML file open, up in the head area, you'll see we have a link to style.css, which we'll open in a moment. Down in the body area, we have a main article element, and inside there we have an h1 and a paragraph element. Now, to preview the layout we're gonna be working with, you can open index.html up in a browser. Here, you'll see we have our article element with a blue outline, a slight drop shadow, and a semi-transparent blue background. The first thing we're going to do is bring a graphic into…

Contents