Notes

• Block elements can have a height and width.
• By default, line breaks are placed in the document flow between elements, assuming there are no other CSS properties in effect that disrupt the document flow, such as floats or non-static positioning.
• Unfortunately, the border-collapse property only applies to tables, not block or inline elements. Thus, we get double borders between the elements.
• One solution is to use negative margins
• Another solution I found on StackOverflow uses box-shadow instead of borders, but I think that's too tricky and I'll never remember it (although learning more about box-shadow in general is a good idea).
• Otherwise, you just need to manually set the top, left, bottom, and right borders individually, as needed, but that is not very modular because it requires having knowledge of the content around you.

Notes

• Once again, we see the double borders between the two elements.
• Floats are in effect, so normal line breaks are removed.
• If the browser width is too narrow, the elements will split onto multiple lines.

Notes

This is a notoriously difficult problem with numerous hacks and tricks being put forth on the Internet. Left/right centering is fairly easily accomplished using margin: auto; but the vertical centering is a problem. As best I can tell, if you do not know the height of the parent container, there is no way to do it using display: block; in pure HTML and CSS (no JavaScript). The most straightforward way I've found is to change the parent element to display: table‑cell; and use vertical‑align: middle;.